<template>
  <div class="page-min">
        <div class="sreach-view">
                <el-form ref="form"   label-width="120px">
                    <el-form-item label="客户类别:" style="width:250px">
                         <securityList  v-model="form.data.customerCatePid"  />
                    </el-form-item>
                    <el-form-item label="区域:" style="width:250px">
                      <securityList  v-model="form.data.areaId"  />
                    </el-form-item>
                     <el-form-item label="小区名称:" style="width:250px">
                      <securityList  v-model="form.data.residentialId"  />
                    </el-form-item>
                    <el-form-item label="楼栋:" style="width:250px">
                      <securityList  v-model="form.data.building"  />
                    </el-form-item>
                    <el-form-item label="单元:" style="width:250px">
                      <securityList  v-model="form.data.unit"  />
                    </el-form-item>
                    <el-form-item label="房间:" style="width:250px">
                      <securityList  v-model="form.data.doorNo"  />
                    </el-form-item>
                    <el-form-item label="客户类型:" style="width:250px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.data.customerCateId"  
                            placeholder="请选择">
                            <el-option
                              v-for="item in customerList"
                              :key="item.data.id"
                              :label="item.data.customerCateName"
                              :value="item.data.id">
                            </el-option>
                          </el-select>
                    </el-form-item>
                    <el-form-item label="燃气表号:" style="width:250px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.data.meterId"  
                            placeholder="请选择">
                            <el-option
                              v-for="item in situationList"
                              :key="item.value"
                              :label="item.text"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                    <el-form-item label="联系电话:" style="width:300px">
                      <el-input size="mini" v-model="form.data.customerPhone" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="客户名称:" style="width:300px">
                      <el-input size="mini" v-model="form.data.customerName" placeholder="请输入内容"></el-input>

                    </el-form-item>
                    <el-form-item label="是否初次安检:" style="width:250px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.data.firstCheck"
                            placeholder="请选择">
                            <el-option
                              v-for="item in [{text:'是',value:1},{text:'否',value:2}]"
                              :key="item.value"
                              :label="item.text"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                     <el-form-item label="" prop="name" style="width:300px">
                        <el-button type="primary" size="mini"  icon="el-icon-search"  @click="btnQuery">查询</el-button>
                        <el-button size="mini"  icon="el-icon-scissors"  @click="btnReSet">重置</el-button>
                    </el-form-item>
                </el-form>
          </div>

      
            <gridTable title="" 
            :selection="true"
            :operation="false"
            :page="page"  
            :data="tableData" 
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             @selection-change="handleSelectionChange"
            :columnList="columnList">
            </gridTable>
              <el-button size="mini" type="primary"  icon="el-icon-save"  @click="btnSave">确认</el-button>
              <el-button size="mini"   @click="btnClose">取消</el-button>

  </div>
</template>

<script>
import  {findCusDoorNoGas,findCusCustomerCate}  from '@/api/user'
import taskDetail from './components/taskDetail'
import gridTable from '@/components/eTable'
import securityList from './components/securityList'

export default {
  components:{
    taskDetail,
    gridTable,
    securityList
  },
  data() {
    return {
        tableData: [],
        dialogVisible:false,
        openStatus:false,
        form: {
          data:{
              // staffId:'',
              // securityCheckName:'',
              // customerCateId:'', 
              // enterRoomSituation:'', 
              // securityCheckResult:''
          },
          page:1,
          pageSize:10,
        },
        resultList:[{text:'正常',value:1},{text:'隐患',value:2},{text:'未完成',value:3}],
        situationList:[{text:'已完成',value:1},{text:'到访不遇',value:2},{text:'拒绝入户',value:3}],
        saveForm:{
          id:'',
          projectId:'', 
          enterpriseId:'',
          rcAmount:'', 
          rcTime:'',
          rcPeople:'', 
          rcNumber:'',  
          rcStatus:''
        },
        rules: {
          projectId: [ { required: true, message: '此项为必填项！', trigger: 'blur' }],
          enterpriseId: [ { required: true, message: '此项为必填项！', trigger: 'blur' }],
          rcAmount: [ { required: true, message: '此项为必填项！', trigger: 'blur' }],
        },
        title:'',
        page:{
            currentPage:1,
            pageSize:10,
            total:0
        },
        customerList:[],
        dataDetail:null,  
        columnList:[
          {label:'姓名',prop:'customerName',iStrue:true},
          {label:'电话',prop:'customerPhone',iStrue:true},
          {label:'客户类型',prop:'customerCateId',iStrue:true},
          {label:'区域',prop:'areaId',iStrue:true},
          {label:'小区详细名称',prop:'residentialId',iStrue:true},
          {label:'楼栋',prop:'building',iStrue:true},
          {label:'单元',prop:'unit',iStrue:true},
          {label:'门牌号',prop:'houseNo',iStrue:true},
          {label:'户号',prop:'doorNo',iStrue:true},
          {label:'气表表号',prop:'meterNo',iStrue:true},
          {label:'上次安检时间',prop:'lastCheckTime',iStrue:true},
          {label:'是否初次安检',prop:'firstCheck',iStrue:true},
        ],
        copyList:[]
    }
  },
  created(){
     this.getPageList()
    // this.findCusCustomerCate()
  },
  methods: {
    openUrl(){
      this.$router.push({ path: '/analysis' })
    },
    btnQuery(){
      this.getPageList()
    },
    btnReSet(){
      this.form={
          data:{
              staffId:'',
              securityCheckName:'',
              customerCateId:'', 
              enterRoomSituation:'', 
              securityCheckResult:''
          },
          page:1,
          pageSize:10
        }
    },
    handleSelectionChange(data){
      this.copyList = data   
    },
    findCusCustomerCate(){
           findCusCustomerCate({page:1,pageSize:999,data:{}}).then((res)=>{
               if(res.code==0){
                this.customerList= res.data.data
              }
          })
     },
     getPageList(){
           findCusDoorNoGas(this.form).then((res)=>{
               if(res.code==0){
                 this.tableData = res.data.data;
                 this.page.total = res.data.total
              }else{
                 this.tableData = []
                  this.page.total = 0
              }
          })
     },

     btnSave(){
       this.$emit('save',this.copyList)
     },
      btnClose(){
       this.$emit('close',false)
     },
     handleSizeChange(val) {
        this.form.pageSize = val
        this.getPageList()
      },
      handleCurrentChange(val) {
        this.form.page = val
        this.getPageList()
      }
  }
}
</script>

<style lang="scss" scoped>
.page-min{
    margin: 10px;
    background-color: #fff;
    border:1px solid #ddd;
    border-radius:4px;
    padding:10px;
}
.sreach-view{
    border-bottom:1px solid #EAEDF0;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    flex-flow: wrap;
     .el-form{
        display: flex;
        flex-wrap: wrap;
        justify-content:flex-start;
        .el-form-item{
          margin-bottom:6px;
        }
        }
        .el-form-item__label{
            color: #666;
            font-weight: normal;
        }
        .btn-open{
          cursor: pointer;
          margin-left:20px;
          font-size:14px;
          color:#1890ff;
          i{
            font-size:14px;
            color:#1890ff;
          }
        }
}
.tools-view{
  text-align: right;
  padding:10px 0;
  position: relative;
  .title{
    position:absolute;
    left:0;
    font-size:16px;
    color:#606266;
    font-weight: normal;
    height:30px;
    line-height:30px;
  }
  i{
    font-size:16px;
    cursor: pointer;
    color: #606266;
    margin-left:10px;
    border-radius:50%;
    height:30px;
    width:30px;
    text-align: center;
    line-height:30px;
    border:1px solid #dcdfe6;
  }:hover{
    color:#1890ff;
  }
}

.el-form{
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
}
.el-form-item__label{
    color: #666;
    font-weight: normal;
}

</style>